<!DOCTYPE html>
<html lang="zh">
<head>
    <:include file="../../common/css.html" title="标签组件"/>
</head>
<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">开发环境</div>
                <div class="layui-card-body">
                    Tag 标签组件
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="/assets/component/pear/css/pear.css" />
 并
<script src="/assets/component/layui/layui.js"></script>
 并
<script src="/assets/component/pear/pear.js"></script>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">主题风格</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container tag">
                        <button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
                        <button lay-id="22" type="button" class="tag-item">用户管理</button>
                        <button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
                        <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag">
    <button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
    <button lay-id="22" type="button" class="tag-item">用户管理</button>
    <button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
    <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">动态操作</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">
                        <button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
                        <button lay-id="22" type="button" class="tag-item">用户管理</button>
                        <button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
                        <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
tag.add('demo', {text: '新选项',id: 12})

tag.delete('demo', '44');
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">圆角风格</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container tag" lay-filter="test" lay-newTag="true">
                        <button lay-id="11" type="button" class="tag-item">网站设置</button>
                        <button lay-id="22" type="button" class="tag-item">用户管理</button>
                        <button lay-id="33" type="button" class="tag-item">权限分配</button>
                        <button lay-id="44" type="button" class="tag-item">商品管理</button>
                        <button lay-id="55" type="button" class="tag-item">订单管理</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag" lay-filter="test" lay-newTags="true">
    <button lay-id="11" type="button" class="tag-item">网站设置</button>
    <button lay-id="22" type="button" class="tag-item">用户管理</button>
    <button lay-id="33" type="button" class="tag-item">权限分配</button>
    <button lay-id="44" type="button" class="tag-item">商品管理</button>
    <button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">删除功能</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container tag" lay-allowclose="true">
                        <button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
                        <button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
                        <button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
                        <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
                        <button lay-id="55" type="button" class="tag-item tag-item-danger">订单管理</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag" lay-allowclose="true">
    <button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
    <button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
    <button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
    <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>

tag.on('delete(demo)', function(data) {
    console.log('删除');
    console.log(this);
    console.log(data.index);
    console.log(data.elem);
    console.log(data.othis);
});
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">新建功能</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container tag" lay-newTag="true">
                        <button lay-id="11" type="button" class="tag-item">网站设置</button>
                        <button lay-id="22" type="button" class="tag-item">用户管理</button>
                        <button lay-id="33" type="button" class="tag-item">权限分配</button>
                        <button lay-id="44" type="button" class="tag-item">商品管理</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag" lay-newTags="true">
    <button lay-id="11" type="button" class="tag-item">网站设置</button>
    <button lay-id="22" type="button" class="tag-item">用户管理</button>
    <button lay-id="33" type="button" class="tag-item">权限分配</button>
    <button lay-id="44" type="button" class="tag-item">商品管理</button>
</div>

tag.on('add(demo)', function(data) {
    console.log('新建');
    console.log(this);
    console.log(data.index);
    console.log(data.elem);
});
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 依 赖 脚 本 -->
    <:include file="../../common/js.html" />
    <script>
        layui.use(['tag', 'code', 'element'], function() {
            var $ = layui.jquery,
                tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块

            layui.code({ encode: true  });

            tag.render("test", {
                skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius', //标签样式
                tagText: '<i class="layui-icon layui-icon-add-1"></i>添加标签' //标签添加按钮提示文本
            });

            var active = {
                tagAdd: function() {
                    //新增一个Tag项
                    tag.add('demo', {
                        text: '新选项' + (Math.random() * 1000 | 0) //用于演示
                            ,
                        id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                },
                tagDelete: function(othis) {
                    //删除指定Tag项
                    tag.delete('demo', '44'); //删除：“商品管理”
                    othis.addClass('layui-btn-disabled');
                }
            };

            $('.site-demo-active').on('click', function() {
                var othis = $(this),
                    type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            tag.on('click(demo)', function(data) {
                console.log('点击');
                console.log(this); //当前Tag标签所在的原始DOM元素
                console.log(data.index); //得到当前Tag的所在下标
                console.log(data.elem); //得到当前的Tag大容器
            });

            tag.on('add(demo)', function(data) {
                console.log('新增');
                console.log(this); //当前Tag标签所在的原始DOM元素
                console.log(data.index); //得到当前Tag的所在下标
                console.log(data.elem); //得到当前的Tag大容器
                console.log(data.othis); //得到新增的DOM对象
                //return false; //返回false 取消新增操作； 同from表达提交事件。
            });

            tag.on('delete(demo)', function(data) {
                console.log('删除');
                console.log(this); //当前Tag标签所在的原始DOM元素
                console.log(data.index); //得到当前Tag的所在下标
                console.log(data.elem); //得到当前的Tag大容器
            });
        });
    </script>
</body>
</html>
